<template>
  <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
    <el-table-column type="selection" width="40" />
    <el-table-column label="商品名称" width="180">
      <template #default="scope">{{ scope.row.title }}</template>
    </el-table-column>
    <el-table-column label="商品种类" width="180">
      <template #default="scope">{{ scope.row.category }}</template>
    </el-table-column>
    <el-table-column label="商品图片" width="180">
      <template #default="scope">
        <!-- <img :src="scope.row.img_big_logo" alt="" style="width: 8vw; height: 8vw"/> -->
        <div class="demo-image__preview">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.img_big_logo"
            @click="ima(scope.row.img_big_logo)"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="srcList"
            :initial-index="4"
            fit="cover"
            preview-teleported="true"
          />
        </div>
      </template>
    </el-table-column>
    <el-table-column label="是否售卖" width="180">
      <template #default="scope"> <el-switch v-model="scope.row.is_sale" /></template>
    </el-table-column>
    <el-table-column label="商品价格" width="180">
      <template #default="scope">{{ scope.row.price }}</template>
    </el-table-column>
    <el-table-column label="操作方法">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"> 编辑 </el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-pagination
    background
    layout="prev, pager, next"
    :total="1000"
    :page-size="pagesize"
    v-model:current-page="current"
    @current-change="handleCurrentChange"
  />

  <div style="margin-top: 20px">
    <el-button> 售出数量 :1000000单</el-button>
    <el-button>存货：应有尽有</el-button>
  </div>
</template>
<script>
import { listReq } from '@/stores/https'

export default {
  methods: {
    //图片
    ima(img_big_logo) {
      this.srcList = [img_big_logo]
    },
    //分页
    handleCurrentChange() {
      this.loadlist()
    },
    //刷新列表
    loadlist() {
      listReq(this.current, this.pagesize).then((r) => {
        console.log(r.data.list)
        this.tableData = r.data.list
      })
    }
  },
  data() {
    return {
      current: 1,
      pagesize: 4,
      tableData: [],
      srcList: []
    }
  },
  mounted() {
    this.loadlist()
  }
}
</script>
<style lang="css">
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>
